<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/Magnifier.css">
    <link rel="stylesheet" href="../css/inndex.css">
    <link rel="stylesheet" href="../font/iconfont.css">
</head>
<body>
    <header class="header">
        <div class="logo">
            <img src="http://www.fiyta.com.cn/dist/images/logo.png" alt="">
        </div>
        <div class="top">
            <ul class="list">
                <li>快速选表</li>
                <li>男士腕表</li>
                <li>女士腕表</li>
                <li>情侣腕表</li>
                <li>关于品牌</li>
                <li>客户服务</li>
            </ul>
            <ul class="list1">
                <li><i class="iconfont icon-denglu"></i></li>

                <li><i class="iconfont icon-gouwuche"></i></li>
                <li><i class="iconfont icon-sousuo"></i></li>
            </ul>
        </div>

    </header>
    <div class="box">
        <div class="box-left">
            <img src="http://www.fiyta.com.cn/upload//%E5%9B%9B%E5%8F%B6%E8%8D%89%E7%B3%BB%E5%88%97LA862031.PWRD.jpg" alt="飞亚达四叶草系列LA862031.PWRD">
        </div>
        <div class="box-right">
            <div class="hd">
                <h1 class="name">飞亚达四叶草系列LA862031.PWRD</h1>
                <a href=""id="" class="collect">添加收藏</a>
            </div>
            <div class="bd">
                <p class="price">
                <span class="rmb">$</span>
                <span class="num" id="price">3880.00</span>
                </p>
                <div class="nav">
                    <input type="hidden" id="stock" value="16">
                    <a href="" class="ts" id="ts1">立即购买</a>
                    <a href="" class="ts2" id="ts3">添加至购物车</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="small-img">
              <img src="http://www.fiyta.com.cn/upload//%E5%9B%9B%E5%8F%B6%E8%8D%89%E7%B3%BB%E5%88%97LA862031.PWRD.jpg" alt="">
              <div class="focus"></div>
        </div>
        <div class="big-img">
              <img src="http://www.fiyta.com.cn/upload//%E5%9B%9B%E5%8F%B6%E8%8D%89%E7%B3%BB%E5%88%97LA862031.PWRD.jpg" alt="">
        </div>

        <!-- <div class="paginaion">
              <img src="./images/1.item.jpg" alt="">
              <img src="./images/2.item.jpg" alt="">
        </div> -->
  </div>

    <script>
         function Magnifier(){
              this.small_img = document.querySelector(".small-img");
              this.focus     = document.querySelector(".focus");
              this.big_img_focus  = document.querySelector(".big-img");
              this.big_img = this.big_img_focus.querySelector("img");

              this.container = document.querySelector(".container");

              this.container_offset = {
                    left : this.container.offsetLeft,
                    top  : this.container.offsetTop
              }
              this.focus_style = getComputedStyle( this.focus );
        }
        Magnifier.prototype.bindEvent = function(){
              var instance = this;
              this.small_img.onmouseover = function(){
                    instance.toggle("block");
              }
              this.small_img.onmouseout = function(){
                    instance.toggle("none");
              }
              this.small_img.onmousemove = function( evt ){
                    var e = evt || event;

                    instance.move( e.clientX - instance.container_offset.left  , e.clientY - instance.container_offset.top );
              }
        }
        Magnifier.prototype.toggle = function( type ){
              this.focus.style.display = type;
              this.big_img_focus.style.display = type;
        }
        Magnifier.prototype.move = function( x , y ){

              var _left =  x - parseInt(this.focus_style.width) / 2
              var _top  =  y - parseInt(this.focus_style.height) / 2

              _left = _left < 0 ? 0 : _left;
              _left = _left > 114 ? 114 : _left;

              _top = _top < 0 ? 0 : _top; 
              _top = _top > 114 ? 114 : _top;

              this.focus.style.left = _left + "px";
              this.focus.style.top  = _top + "px";

              var _left_per = _left / 114;
              var _top_per  = _top  / 114;

              this.big_img.style.left = -260 * _left_per + "px";
              this.big_img.style.top  = -260 * _top_per + "px";
        }
        var m = new Magnifier();
        m.bindEvent();
        
    </script>
</body>
</html>